<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>电商</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../../css/utils/mui.min.css">
	<style>
		.list-ul {
			width: 100%;
			position: relative;
			list-style: none;
			margin-top: 10px;
			padding: 0 5px;
			font-size: 0;
    		display: block;
		    white-space: normal;
		}
		.list-li {
			position: relative;
			overflow: hidden;
			display: inline-block;
			width: 50%;
			margin: 0;
			padding-top: 10px;
		}
		.li-content {
			height: 240px;
			margin: 0 5px 0 5px;
			background-color: #fff;
			border-radius: 4px;
		}
		.model-img {
			height: 166px;
			width: 100%;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
		}
		.body-content {
			margin-top: -6px;
			padding: 0 6px 6px 6px;
			font-size: 14px;
			color: #1F1F1F;
		}
		.body-content .mui-ellipsis-2 {
			height: 42px;
		}
		.goods-price {
			font-size: 16px;
			color: #1F1F1F;
		}
		.left-price {
			width: 50%;
			display: inline-block;
			font-size: 12px;
			color: #BCBCBC;
			text-decoration:line-through;
		}
		.right-price {
			width: 50%;
			display: inline-block;
			text-align: right;
			font-weight: bold;
		}
		
		.mui-bar-tab {
			background-color: #fff;
			-webkit-box-shadow: 0 0 0 rgba(0,0,0,.85);
    		box-shadow: 0 0 0 rgba(0,0,0,.85);
		}
		.mui-bar-tab .mui-tab-item.mui-active {
			color: #FA1F35;
		}
		.mui-bar-tab .mui-tab-item {
			color: #BCBCBC;
		}
		.goods-tab {
			background: url(../../img/phone/mall-no.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .goods-tab {
			background: url(../../img/phone/mall-active.png) no-repeat;
			background-size: 100% 100%;
		}
		.order-tab {
			background: url(../../img/phone/mall-order.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .order-tab {
			background: url(../../img/phone/mall-order-active.png) no-repeat;
			background-size: 100% 100%;
		}
		.income-tab {
			background: url(../../img/phone/mall-income.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .income-tab {
			background: url(../../img/phone/mall-income-active.png) no-repeat;
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<span class="mui-icon goods-tab"></span>
			<span class="mui-tab-label">商品</span>
		</a>
		<a class="mui-tab-item" id="toOrder" href="#">
			<span class="mui-icon order-tab"></span>
			<span class="mui-tab-label">订单</span>
		</a>
		<a class="mui-tab-item" id="toIncome" href="#">
			<span class="mui-icon income-tab"></span>
			<span class="mui-tab-label">收益</span>
		</a>
	</nav>
	<div class="mui-content">
		<div id="tabbar" class="mui-control-content mui-active">
			<ul id="goodsList" class="list-ul">
				<!--<li class="list-li">
					<div class="li-content">
						<img class="model-img" src="../../img/test-back.jpg" />
						<div class="body-content">
							<div class="mui-ellipsis-2">青岩卤猪脚范德萨看了解放路肯定是富家大室看来发的来看撒娇</div>
							<div class="goods-price">
								<div class="left-price">原价:￥80.00</div><div class="right-price">￥75.00</div>
							</div>
						</div>	
					</div>
				</li>-->
			</ul>
		</div>
		<div id="tabbar-with-chat" class="mui-control-content">
			
		</div>
		<div id="tabbar-with-contact" class="mui-control-content">
			
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js?version=2" ></script>
	<script>
		mui.init();
		var customerID = base.getParameter("customerID");
		var second = 0;
		/*window.setInterval(function () {
		    second ++;
		}, 1000);
		
		window.addEventListener('pagehide',()=>{
			if (second == 0) {
				return;
			}
		    $.ajax({
		        url:base.url.testRead,
		        type:'post',
		        data:{readTime:second},
		        async:false,
		        dataType:"json",
		        timeout:20000,//超时时间设置为20秒；
	            success: function (data) {
            		console.log(data);
	            }
		    })
		})*/
		
		$(function(){
			base.postData(base.url.getElectricityList, {customerID:customerID}, function(data){
				if (data.success) {
					initList(data.context.electricityList);
				}
			});
		});
		function initList(data) {
			var html = '';
			for(var i=0; i<data.length; i++) {
				html += pingGoodsList(data[i]);
			}
			$("#goodsList").html(html);
		}
		function pingGoodsList(data) {
			var html = '<li class="list-li">'+
						'	<div class="li-content">'+
						'		<input type="hidden" name="goodsUrl" value="'+data.goodsUrl+'" />'+
						'		<img class="model-img" src="'+data.bannerImg+'" />'+
						'		<div class="body-content">'+
						'			<div class="mui-ellipsis-2">'+data.title+'</div>'+
						'			<div class="goods-price">'+
						'				<div class="left-price">原价:￥'+data.price+'</div><div class="right-price">￥'+data.activityPrice+'</div>'+
						'			</div>'+
						'		</div>'+
						'	</div>'+
						'</li>';
			return html;
		}
		$("#goodsList").on('tap', '.li-content', function(){
			var goodsUrl = $(this).find("input[name='goodsUrl']").val();
			window.location.href=goodsUrl;
		});
		
		$("#toOrder").on('tap', function(){
			window.location.href=server_root+'/admin_mw/pages/phone/goodsOrder.html?customerID='+customerID;
		});
		$("#toIncome").on('tap', function(){
			window.location.href=server_root+'/admin_mw/pages/phone/personalIncome.html?customerID='+customerID;
		});
	</script>
</body>
</html>
